<template>
  <div class="classify">
    <div class="container">
      <div class="header">
        <div class="seach">
          <input type="text" placeholder="Montagne jeunesse" />
          <div class="sousuo">
            <div class="sea">
              <img src="/static/img/search.png" />
            </div>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="left">
          <ul class="nav">
            <li v-for="(goodsTitle,index) in classify" :key="index" @click="addClass(index)" :class="{active:index==current}">
              <a href="#">{{goodsTitle.title}}</a>
            </li>
          </ul>
        </div>
        <div class="right">
           <ul class="conItem">
            <li v-for="(goods) in products" :key="goods.id">
              <div class="imgContainer"><div class="imgSrc"><img :src="'/'+goods.url"/></div></div>
              <span>{{goods.name}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {CLASSIFY} from '@/api'
export default {
  name: 'Classify',
  data () {
    return {
      classify: [],
      current: 0
    }
  },
  computed: {
    // 计算属性，返回对应的种类下的产品
    products () {
      return this.classify.length > 0 ? this.classify[this.current].contents : []
    }
  },
  created () {
    this.$http({
      url: CLASSIFY
    }).then(res => {
      console.log(res)
      this.classify = res.data
    })
  },
  methods: {
    addClass (index) {
      this.current = index
    }
  },
  mounted () {}
}
</script>
<style lang="less" scoped>
.header {
  width: 100%;
  height: 1.84rem;
  position: relative;
  background-color: #ff9900;
  .seach {
    display: block;
    width: 6.906667rem;
    height: 0.8rem;
    position: absolute;
    top: 0.7rem;
    left: 50%;
    margin-left: -3.4533335rem;
    background: #ffe1b5;
    border-radius: 0.133333rem;
    input {
      float: left;
      border: none;
      width: 6rem;
      height: 0.6rem;
      padding: 0.1rem 0;
      border-radius: 0.133333rem;
      padding-left: 0.133333rem;
      line-height: 0.8rem;
      background: #ffe1b5;
    }
    .sousuo {
      float: left;
      display: table;
      width: 0.76rem;
      height: 0.826667rem;
      .sea {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        img {
          width: 0.533333rem;
          height: 0.533333rem;
        }
      }
    }
  }
}
.main {
  height: 21.613333rem;
  overflow: hidden;
  width: 100%;
  .left {
    width: 3.173333rem;
    float: left;
    .nav {
      width: 100%;
      list-style: none;
      .active {
        background-color: #ffffff;
        border-left: .066667rem solid #1d84a7;
        a{
          color: #ff9900;
        }
      }
      li {
        height: 1.24rem;
        line-height: 1.24rem;
        font-size: 0.375067rem;
        text-align: center;
        background: #fafafa;
        cursor: pointer;
        a {
          text-decoration: none;
          color: #686868;
        }
      }
    }
  }
  .right {
    width: 6.626667rem;
    float: left;
    margin-left: 0.2rem;
    .conItem {
      list-style: none;
      padding: 0;
      li {
        width: 3rem;
        height: 3.2rem;
        border: 1px solid #1d84a7;
        border-radius: 0.066667rem;
        margin-right: 0.266667rem;
        margin-top: 0.266667rem;
        position: relative;
        float: left;
        .imgContainer{
          display: table;
          width: 100%;
          height: 2.55rem;
          .imgSrc{
            width: 2.2rem;
            height: 2.2rem;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
          }
        }
        span {
          position: absolute;
          bottom: 0;
          display: block;
          width: 100%;
          background-color: #1d84a7;
          font-size: 0.312533rem;
          text-align: center;
          height: 0.64rem;
          line-height: 0.64rem;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
